<template>
  <view class="t-flex main">
    <image class="bg" src="/static/images/invitation/bg.png" mode="widthFix"></image>
    <image class="but" src="/static/images/invitation/but.png" @click="register" mode="widthFix"></image>
    <view class="input-box">
      <view class="t-flex item-input">
        <input type="text" placeholder="请输入手机号" v-model="mobile" placeholder-class="t-size-28" />
      </view>
      <view class="t-flex item-input">
        <input type="text" placeholder="请输入验证码" v-model="code" placeholder-class="t-size-28" />

        <text class="t-size-24 t-color-f42" style="white-space: nowrap" @click="sendMessage"> {{ codeText }}</text>
      </view>
      <!-- <view class="t-flex item-input">
				<input type="text" value="" placeholder="请设置登录密码" placeholder-class="t-size-28" />
			</view> -->
    </view>
  </view>
</template>
<script>
import { interval, take } from 'rxjs';

export default {
  data() {
    return {
      mobile: '',
      code: '',
      codeText: '获取验证码',
      cTimer: null,
    };
  },
  onPageScroll(e) {},
  methods: {
    register() {
      this.$api.post({
        url: '/wanlshop/user/register',
        data: {
          mobile: this.mobile,
          captcha: this.code,
          client_id: uni.getStorageSync('wanlshop:chat_client_id')
            ? uni.getStorageSync('wanlshop:chat_client_id')
            : null,
          invitation: uni.getStorageSync('invitationCode') ? uni.getStorageSync('invitationCode') : null,
          task_id: uni.getStorageSync('taskId') ? uni.getStorageSync('taskId') : null,
        },
        success: res => {
          // uni.hideLoading();
          // 中央控制总线
          // this.$store.dispatch( 'user/login', res );
          // this.$store.dispatch( 'cart/login' );
          // this.$store.dispatch( 'chat/get' );
          // uni.reLaunch( {
          // 	url:  '/pages/user'
          // } );
          uni.showModal({
            title: '注册成功',
            // content: '',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定');
                uni.reLaunch({
                  url: '/pages/apps/invitation/download',
                });
              } else if (res.cancel) {
                console.log('用户点击取消');
              }
            },
          });
        },
      });
    },

    sendMessage() {
      if (this.cTimer == null) {
        if (!/^1[3456789]\d{9}$/.test(this.mobile)) {
          uni.showToast({
            title: '手机号码有误，请重填',
            icon: 'none',
          });
          return;
        }

        this.$api.get({
          url: '/wanlshop/sms/send',
          data: {
            event: 'register',
            mobile: this.mobile,
          },
          loadingTip: '验证码发送中...',
          success: res => {
            console.log('验证码发送成功  ========>', res);
            this.$wanlshop.msg('验证码发送成功');

            this.startTimer();
            this.code = '';
          },
        });
      }
    },
    startTimer() {
      if (this.cTimer == null) {
        const seconds = 60;
        this.cTimer = interval(1000)
          .pipe(take(seconds))
          .subscribe({
            next: value => {
              this.codeText = `${seconds - value}s`;
            },
            complete: () => {
              this.codeText = `重新获取`;
              this.cTimer = null;
            },
          });
      }
    },
    clearTimer() {
      this.cTimer.unsubscribe();
      this.cTimer = null;
    },
  },
};
</script>
<style lang="scss" scoped>
.contact {
  background-color: #f8f8f8;
}

.t-color-fff {
  color: #ffffff;
}

.t-color-f42 {
  color: #ff412c;
}

.t-color-666 {
  color: #666666;
}

.t-color-333 {
  color: #333333;
}

.t-size-40 {
  font-size: 40rpx;
}

.t-size-32 {
  font-size: 32rpx;
}

.t-size-24 {
  font-size: 24rpx;
}

.t-size-28 {
  font-size: 28rpx;
}

.t-font-700 {
  font-weight: 700;
}

.t-flex {
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: column;
}

.main {
  position: relative;
  width: 750rpx;
}

.bg {
  position: absolute;
  width: 750rpx;
  left: 0;
  top: 0;
}

.but {
  position: absolute;
  width: 460rpx;
  left: 50%;
  transform: translateX(-50%);
  top: 1100rpx;
}

.input-box {
  position: absolute;
  width: 500rpx;
  left: 50%;
  transform: translateX(-50%);
  top: 720rpx;
}

.item-input {
  background-color: #ffffff;
  margin-bottom: 60rpx;
  width: 502rpx;
  height: 88rpx;
  background: #ffffff;
  border-radius: 44rpx;
  padding: 0 30rpx;

  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
</style>
